<template>
	<div class="order">
		<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
			<el-form-item label="所属公司" prop="ownCompany">
				<el-input v-model="formInline.ownCompany" placeholder="公司名称"></el-input>
			</el-form-item>
			<el-form-item label="操作人员" prop="operation">
				<el-input v-model="formInline.operation" placeholder="操作人员"></el-input>
			</el-form-item>
			<el-form-item label="操作时间" prop="value">
				<div class="block">
					<el-date-picker
						v-model="formInline.value"
						type="datetime"
						placeholder="选择日期时间"
						align="right"
						:picker-options="pickerOptions2"
					></el-date-picker>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="default" @click="resetForm('formInline')">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="tables">
			<el-table
				ref="multipleTable"
				:data="tables"
				tooltip-effect="dark"
				style="width: 100%"
				@selection-change=""
			>
				<el-table-column type="index" label="序号" width="50"></el-table-column>

				<!-- <el-table-column prop="transportRequest" label="运输请求单ID" show-overflow-tooltip>
      </el-table-column>
       -->
				<el-table-column prop="opRole" label="操作人员"></el-table-column>
				<el-table-column prop="company" label="所属公司"></el-table-column>
				<el-table-column prop="opModule" label="操作模块"></el-table-column>
				<el-table-column prop="opActions" label="操作功能"></el-table-column>
				<el-table-column prop="opTime" label="操作时间"></el-table-column>
			</el-table>
		</div>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[100, 200, 300, 400]"
			:page-size="100"
			layout="total, sizes, prev, pager, next, jumper"
			:total="400"
		></el-pagination>
	</div>
</template>
<script>
export default {
	data() {
		return {
			tables: [
				{
					id: '12987122',
					opRole: '张大头',
					company: '大头股份有限公司',
					opTime: '2019-10-09',
					opActions: '新增用户',
					opModule: '系统管理',
					shopId: '10333'
				},
				{
					id: '12987123',
					opRole: '李小芳',
					company: '小芳股份有限公司',
					opTime: '2019-10-09',
					opActions: '新增用户',
					opModule: '系统管理',
					shopId: '10333'
				}
			],
			formInline: {
				ownCompany: '',
				operation: '',
				value: ''
			},
			pickerOptions2: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
			value2: '',
			currentPage: 3
		};
	},
	methods: {
		onSubmit() {
			console.log('submit!');
		},
		handleClick(row) {
			console.log(row);
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
		},
		resetForm(formName) {
			console.log(this.$refs[formName]);
			this.$refs[formName].resetFields();
		}
	},
	components: {}
};
</script>
<style lang="scss">
.order {
	padding-top: 30px;
}

.tables {
	margin-top: 20px;
}
</style>
